<template lang="pug">
	.update-wrap
		.update-input
			input-line(leftText='原密码' placeholder="请输入原密码" type="text" @getValue="getOldPaswd" maxlength="16" mode="showPassword" :password="true")
		.update-input
			input-line(leftText='新密码' placeholder="请输入新密码" type="text" @getValue="getNewPaswd" maxlength="16" mode="showPassword" :password="true")
			input-line(leftText='确认密码' placeholder="请再次输入新密码" type="text" @getValue="getNewPaswdAgain" maxlength="16" mode="showPassword" :password="true")
		.update-btn(@click="jumpToNext")
			main-button(text="确认修改" :isActive="nextStepPass")
</template>

<script>
import inputLine from '@/components/input-line'
import mainButton from '@/components/main-button'
export default {
	name: 'updatePaswd',
	data() {
		return {
			oldPaswd: '',
			newPaswd: '',
			newPaswdAgain: '',
			nextStepPassOldPaswd: false,
			nextStepPassNewPaswd: false,
			nextStepPassNewPaswdAgain: false,
			mobile: ''
		}
	},
	computed: {
		nextStepPass() {
			return (
				this.nextStepPassOldPaswd &&
				this.nextStepPassNewPaswd &&
				this.nextStepPassNewPaswdAgain
			)
		}
	},
	created() {},
	onLoad() {
		Object.assign(this.$data, this.$options.data())
	},
	mounted() {
		let that = this
		this.wx.getStorage({
			key: 'userInfo',
			success: res => {
				that.mobile = res.data.phone
			}
		})
	},
	methods: {
		jumpToNext() {
			if (this.nextStepPass) {
				this.submit()
			}
		},
		getOldPaswd(text) {
			text = text.toString()
			this.oldPaswd = text
			this.nextStepPassOldPaswd = text.length > 0
		},
		getNewPaswd(text) {
			text = text.toString()
			this.newPaswd = text
			this.nextStepPassNewPaswd = text.length > 0
		},
		getNewPaswdAgain(text) {
			text = text.toString()
			this.newPaswdAgain = text
			this.nextStepPassNewPaswdAgain = text.length > 0
		},
		submit() {
			if (this.newPaswd !== this.newPaswdAgain) {
				this.wx.showToast({
					title: '前后两次新密码不一致',
					icon: 'none'
				})
				return false
			}
			this.wx.showLoading({
				title: '加载中'
			})
			this.api.jtApi
				.updatePaswd({
					mobile: this.mobile,
					login_password: this.oldPaswd,
					login_newpassword: this.newPaswd
				})
				.then(data => {
					this.wx.hideLoading()
					if (data.ret_code === '0') {
						this.wx.showToast({
							title: '修改成功'
						})
						setTimeout(() => {
							this.$router.back()
						}, 1000)
					} else {
						this.wx.showToast({
							title: data.ret_info,
							icon: 'none'
						})
					}
				})
				.catch(() => {
					this.wx.hideLoading()
				})
		}
	},
	components: {
		inputLine,
		mainButton
	}
}
</script>

<style lang="stylus">
	.update-wrap
		.update-input
			margin-bottom mainMargin
			background-color white
		.update-btn
			width 690px
			height 92px
			margin 60px auto 0
			border-radius 46px
			overflow hidden

</style>
